<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn"  uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>La porra y el churro</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style type="text/css">
#porraList .centerDiv {
    text-align: center;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>LA PORRA Y EL CHURRO</h1>
  </div>

  <div data-role="main" class="ui-content" role="main">
    <div class="content-primary">
    <ul data-role="listview" class="ui-listview" id="porraList">
      <c:forEach items="${modelList}" var="model" varStatus="status">
        <c:if test="${model.tipo==48 && (model.usuario==null || model.usuario=='')}">
        <div style="background-color: #FFFF00;text-align: center;">16-vos</div>
        </c:if>
        <c:if test="${model.tipo==56 && (model.usuario==null || model.usuario=='')}">
        <div style="background-color: #FFFF00;text-align: center;">Octavos</div>
        </c:if>
        <c:if test="${model.tipo==60 && (model.usuario==null || model.usuario=='')}">
        <div style="background-color: #FFFF00;text-align: center;">Cuartos</div>
        </c:if>
        <c:choose>
          <c:when test="${model.usuario==null || model.usuario==''}">
            <c:set var="headline" value="${model.pais1}${model.pais2}"/>
            <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-bar-b centerDiv">${model.pais1} ${model.goles1} : ${model.goles2} ${model.pais2}</li>
          </c:when>
          <c:otherwise>
            <li class="ui-li ui-li-divider ui-bar-b">
              <div>
                <font color="#009900">${model.puntos} pts.</font> - 
                <font color="#0000FF">${model.usuario}</font>
                <c:if test="${model.tipo<=48}">
                  ${model.goles1} : ${model.goles2}
                </c:if>
              </div>
              <c:if test="${model.tipo>48}">
                <div style="text-align: center;">
                ${model.pais1} ${model.goles1} : ${model.goles2} ${model.pais2}
                </div>
              </c:if>
            </li>
          </c:otherwise>
        </c:choose>
      </c:forEach>
    </ul>
    </div>
  </div>

  <div data-role="footer">
    <h1>¡Buena suerte!</h1>
  </div>
</div>
</body>
</html>